import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Checkbox, Form, Input } from "antd";
import LoginStyle from "@/assets/styles/login.module.scss";
import { loginApi } from "@/api/auth.js";
import { useDispatch } from "react-redux";
import { getUserInfo } from "@/store/slices/authSlice.js";
const onFinishFailed = (e) => {
  console.log("efail", e);
};
const Login = () => {
  const dispatch = useDispatch();
  const nav = useNavigate();
  const [token, setToken] = useState(localStorage.getItem("token"));

  useEffect(() => {
    if (token) {
      console.log("2@@@");
      nav("/");
    }
  }, [token]);
  const [form, setFormData] = useState({
    username: "",
    password: "",
    checked: false,
  });
  const onFinish = async (e) => {
    console.log("e", e);
    const { username, password } = e;
    // 登录逻辑
    const res = await loginApi({ username, password });
    console.log("login", res);
    if (res && res.token) {
      localStorage.setItem("token", res.token);
      setToken(res.token);
      dispatch(getUserInfo());
    }
  };

  const handleUsername = (e) => {
    setFormData({ ...form, username: e.target.value });
    console.log(e.target.value, "username");
  };

  const handlePassword = (e) => {
    console.log(e.target.value, "password");
    setFormData({ ...form, password: e.target.value });
  };
  const handleRemeber = (e) => {
    console.log(e.target.checked, "remeber");
    setFormData({ ...form, checked: e.target.checked });
  };
  return (
    <div className={LoginStyle.container}>
      <div className={LoginStyle.left}></div>
      <div className={LoginStyle.right}>
        <Form
          labelAlign="left"
          className={LoginStyle["anti-form"]}
          name="basic"
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 16,
          }}
          style={{
            maxWidth: 600,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <i className={LoginStyle.leftAni}></i>
          <i className={LoginStyle.rightAni}></i>
          <h2>
            欢迎来到<span>文一博客管理后台</span>
          </h2>
          <Form.Item
            labelAlign="left"
            label="用户名"
            name="username"
            rules={[
              {
                required: true,
                message: "请输入用户名：",
              },
            ]}
          >
            <Input value={form.username} onChange={handleUsername} />
          </Form.Item>

          <Form.Item
            labelAlign="left"
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
            ]}
          >
            <Input.Password value={form.password} onChange={handlePassword} />
          </Form.Item>
          <Form.Item
            name="remember"
            valuePropName="checked"
            wrapperCol={{
              offset: 0,
              span: 4,
            }}
          >
            <Checkbox checked={form.checked} onChange={handleRemeber}>
              记住我
            </Checkbox>
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 4,
              span: 16,
            }}
          >
            <Button
              type="primary"
              htmlType="submit"
              className={LoginStyle["ant-btn"]}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
export default Login;
